import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { map, mergeMap } from "rxjs/operators";
import { NzModalService } from 'ng-zorro-antd';
@Component({
  selector: 'app-city',
  templateUrl: './city.component.html',
  styleUrls: ['./city.component.css'],
  styles: [`
    ::ng-deep .vertical-center-modal {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    ::ng-deep .vertical-center-modal .ant-modal {
      top: 0;
    }
    ::ng-deep .marginTop{
      margin-top:10px;
    }
    ::ng-deep   .iconEdit{
      font-size: 16px;
      color:#4395ff;
      cursor: pointer;
    }
  ` ]
})
export class cityComponent implements OnInit {
  constructor(private http: HttpClient, private modalService: NzModalService) {
  }
  allChecked = false;
  disabledButton = true;
  checkedNumber = 0;
  isAdd = 0;
  displayData: Array<{ cityNo: any; cityName: any; citySelect: any; cityStaffNum: any; cityStatus: any; checked: boolean }> = [];
  operating = false;
  dataSet = [];
  allDataSet = [];
  delData: any = [];
  cityNo: any;
  cityName: any;
  citySelect: any;
  cityStaffNum: any;
  cityStatus: any;
  allData: any;
  cityRevenue: any;
  cityCost: any;
  indeterminate = false;
  isVisible = false;
  thisProfit: any;
  editId: any;
  currentPageDataChange($event: Array<{ cityNo: any; cityName: any; citySelect: any; cityStaffNum: any; cityStatus: any; checked: boolean }>): void {
    this.displayData = $event;
  }
  showModal(): void {
    this.isAdd = 0;
    this.isVisible = true;
    this.cityNo = null;
    this.cityName = null;
    this.citySelect = null;
    this.cityStaffNum = null;
    this.cityStatus = null;
  }

  handleOk(): void {
    this.isVisible = false;
  }

  handleCancel(): void {
    this.isVisible = false;
  }
  refreshStatus(): void {
    const allChecked = this.displayData.every(value => value.checked === true);
    const allUnChecked = this.displayData.every(value => !value.checked);
    this.allChecked = allChecked;
    this.indeterminate = (!allChecked) && (!allUnChecked);
    this.disabledButton = !this.dataSet.some(value => value.checked);
    this.checkedNumber = this.dataSet.filter(value => value.checked).length;
  }

  checkAll(value: boolean): void {
    this.displayData.forEach(data => data.checked = value);
    this.refreshStatus();
  }

  operateData(): void {
    this.operating = true;
    setTimeout(_ => {
      this.dataSet.forEach(value => value.checked = false);
      this.refreshStatus();
      this.operating = false;
    }, 1000);
  }
  citySave(): void {
    if (this.isAdd == 0) {
      if (this.cityNo == undefined || this.cityName == undefined || this.cityStaffNum == undefined || this.citySelect == undefined || this.cityStatus == undefined
        || this.cityRevenue == undefined || this.cityCost == undefined
      ) {
        this.error();
      } else {
        this.thisProfit = this.cityRevenue - this.cityCost;
        let params = new URLSearchParams();
        params.append("cityNo", this.cityNo);
        params.append("cityName", this.cityName);
        params.append("cityLevel", this.citySelect);
        params.append("cityStaffNum", this.cityStaffNum);
        params.append("cityStatus", this.cityStatus);
        params.append("revenueName", '营收额');
        params.append("cityRevenue", this.cityRevenue);
        params.append("costName", '成本');
        params.append("cityCost", this.cityCost);
        params.append("profitName", '净利润');
        params.append("cityProfit", this.thisProfit);
        let body = params.toString();
        let header = {
          headers: new HttpHeaders({
            'Content-Type': "application/x-www-form-urlencoded;charset=UTF-8"
          })
        };
        this.http.post('http://www.zhengbenzixun.cn:8080/cityAdd', body, header).subscribe(res => {
          this.allDataSet = [];
          this.isVisible = false;
          for (let i in res) {
            res[i].checked = false;
            this.allDataSet.push(res[i]);
          }
          this.dataSet = [...this.allDataSet];
          this.success();
        })
      }
    } else {
      if (this.cityNo == undefined || this.cityName == undefined || this.cityStaffNum == undefined || this.citySelect == undefined || this.cityStatus == undefined) {
        this.error();
      } else {
        this.thisProfit = this.cityRevenue - this.cityCost;
        let params = new URLSearchParams();
        params.append("cityNo", this.cityNo);
        params.append("cityName", this.cityName);
        params.append("cityLevel", this.citySelect);
        params.append("cityStaffNum", this.cityStaffNum);
        params.append("cityStatus", this.cityStatus);
        params.append("revenueName", '营收额');
        params.append("cityRevenue", this.cityRevenue);
        params.append("costName", '成本');
        params.append("cityCost", this.cityCost);
        params.append("profitName", '净利润');
        params.append("cityProfit", this.thisProfit);
        params.append("cityId", this.editId);
        let body = params.toString();
        let header = {
          headers: new HttpHeaders({
            'Content-Type': "application/x-www-form-urlencoded;charset=UTF-8"
          })
        };
        this.http.post('http://www.zhengbenzixun.cn:8080/cityEdit', body, header).subscribe(res => {
          this.allDataSet = [];
          this.isVisible = false;
          for (let i in res) {
            res[i].checked = false;
            this.allDataSet.push(res[i]);
          }
          this.dataSet = [...this.allDataSet];
          const modal = this.modalService.success({
            nzTitle: '修改成功',
            nzContent: '城市信息已成功修改'
          });
          window.setTimeout(() => modal.destroy(), 1000);
          this.cityNo = null;
          this.cityName = null;
          this.citySelect = null;
          this.cityStaffNum = null;
          this.cityStatus = null;
          this.cityCost = null;
          this.cityRevenue = null;
        })
      }
    }
  }
  citycalcel(): void {
    this.isVisible = false;
  }
  ngOnInit(): void {
    this.http.get('http://www.zhengbenzixun.cn:8080/cityCount').subscribe(res => {
      this.allData = res;
      for (let i = 0; i < this.allData.length; i++) {
        this.allData[i].checked = false;
        this.dataSet = [...this.dataSet, this.allData[i]];
      }
    })
  }
  error(): void {
    const modal = this.modalService.error({
      nzTitle: '信息不完整',
      nzContent: '请将所有信息填写完整'
    });
    window.setTimeout(() => modal.destroy(), 1000);
  }
  success(): void {
    const modal = this.modalService.success({
      nzTitle: '添加成功',
      nzContent: '城市信息已添加成功'
    });
    window.setTimeout(() => modal.destroy(), 1000);
    this.cityNo = null;
    this.cityName = null;
    this.citySelect = null;
    this.cityStaffNum = null;
    this.cityStatus = null;
    this.cityCost = null;
    this.cityRevenue = null;
  }
  editStaff(data): void {
    this.isAdd = 1;
    this.isVisible = true;
    this.cityNo = data.cityNo;
    this.cityName = data.cityName;
    this.citySelect = data.cityLevel;
    this.cityStaffNum = data.cityStaffNum;
    this.cityStatus = data.cityStatus;
    this.cityRevenue = data.cityRevenue;
    this.cityCost = data.cityCost;
    this.editId = data._id;
  }
  delCity(): void {
    this.modalService.confirm({
      nzTitle: '你确定删除这些城市吗',
      nzContent: '删除后将不可恢复！',
      nzOkText: '确定',
      nzOkType: 'danger',
      nzOnOk: () => {
        this.delData = [];
        for (let i in this.displayData) {
          if (this.displayData[i].checked == true) {
            this.delData.push(this.displayData[i].cityNo);
          }
        }
        let params = new URLSearchParams();
        params.append("cityNo", this.delData);
        let body = params.toString();
        let header = {
          headers: new HttpHeaders({
            'Content-Type': "application/x-www-form-urlencoded;charset=UTF-8"
          })
        };
        this.http.post('http://www.zhengbenzixun.cn:8080/cityDel', body, header).subscribe(res => {
          this.allDataSet = [];
          for (let i in res) {
            res[i].checked = false;
            this.allDataSet.push(res[i]);
          }
          this.dataSet = [...this.allDataSet];
          this.allChecked = false;
          const modal = this.modalService.success({
            nzTitle: '删除成功',
            nzContent: '已成功删除所选城市'
          });
          window.setTimeout(() => modal.destroy(), 1000);
          this.cityNo = null;
          this.cityName = null;
          this.citySelect = null;
          this.cityStaffNum = null;
          this.cityStatus = null;
          this.cityCost = null;
          this.cityRevenue = null;
        })
      },
      nzCancelText: '再想想',
      nzOnCancel: () => console.log('取消删除')
    });

  }
}
